<%@ include file="/WEB-INF/views/jsp/include/include.jsp"%>
<html>
<head>
<title>Hand In Hand</title>
<%@ include file="/WEB-INF/views/jsp/include/head.jsp"%>
</head>
<script type="text/javascript">
	$(document).ready(function() {
		$("#userUpdateForm").submit(function(event) {
			$('#selectedTags').val($("input[name='hiddenTagList']").val());
		});
		$("#upload").click(function(event) {
			$("#photoUpload").show();
		});
		$("#photoUpload").hide();
	});
	$(function() {
		$(".tagsManager").tagsManager({
			prefilled : $('#selectedTags').val(),
			CapitalizeFirstLetter : true,
			preventSubmitOnEnter : true,
			typeahead : true,
			typeaheadAjaxSource : null,
			typeaheadSource : null,
			delimeters : [ 44, 188, 13 ],
			backspace : [ 8 ],
			blinkBGColor_1 : '#FFFF9C',
			blinkBGColor_2 : '#CDE69C',
			hiddenTagListId : 'hiddenTagList',
			hiddenTagListName : 'hiddenTagList',
			replace : true,
			tagsContainer : $('.tagList'),
			maxTags : 15
		});
	});
</script>
<body>
	<%@ include file="/WEB-INF/views/jsp/include/header.jsp"%>
	<%@ include file="/WEB-INF/views/jsp/include/navigator.jsp"%>
	
	<div class="container-fluid">
		<div class="row">
			<div class="col-xs-12">
			<h3 class="header">Edit Your Profile</h3>
			<form:form id="userUpdateForm" modelAttribute="userUpdateForm" method="post" action="./updateUser" enctype="multipart/form-data">
				<div class="row">
				<div id="leftColumn" class="col-xs-2">
					<div class="inner">
						<div class="row">
							<div class="col-xs-12">
								<c:if test="${userUpdateForm.user.picture != null }" >
									<img src="<c:url value="/picture"/>" class="img-rounded"/>
								</c:if>
			    					<c:if test="${userUpdateForm.user.picture == null }" >
									<img src=<c:url value="/resources/images/maleicon.jpg"/>
									class="img-rounded">
									</c:if>
							</div>
						</div>
						<div class="row">
							<div class="col-xs-12">
								<button id="upload" type="button" class="btn btn-primary"><b>Upload A Photo</b></button>
							</div>
						</div>
						<div id="photoUpload" class="row">
							<div class="col-xs-12">
								File to upload: <input type="file" name="file"/><br />
											    <br /> <br />
												<button class="btn btn-default" type="button"
								onclick="location.href='<spring:url value="/deletePicture/${userUpdateForm.user.id}"></spring:url>'">
								Delete Picture</button>
							</div>
						</div>
					</div>
				</div>
				<div id="middleColumn" class="col-xs-7">
					<div id="account" class="box">
						<div class="row">
							<div class="col-xs-6">
								<label>Name:</label>
								<form:input type="text" class="form-control" cssErrorClass="form-control inputError" path="user.name" />
								<form:errors path="user.name" cssClass="errorMessage" />
							</div>
							<div class="col-xs-6">
								<label>Surname:</label>
								<form:input type="text"	class="form-control" cssErrorClass="form-control inputError" path="user.surname" /> 
								<form:errors path="user.surname" cssClass="errorMessage" />
							</div>
						</div>
						<div class="row">
							<div class="col-xs-12">
								<label>Email:</label>
								<form:input	type="text" class="form-control" cssErrorClass="form-control inputError" path="user.email" />
								<form:errors path="user.email" cssClass="errorMessage" />
							</div>
						</div>
						<div class="row">
							<div class="col-xs-6">
								<label>Password:</label>
								<form:input type="password" class="form-control" cssErrorClass="form-control inputError" path="password" /> 
								<form:errors path="password" cssClass="errorMessage" />
								<label>Re-Password:</label>
								<form:input type="password" class="form-control" cssErrorClass="form-control inputError" path="rePassword" />
								<form:errors path="rePassword" cssClass="errorMessage" />
								<h6>*Just leave empty if you don't want to update your password</h6>
							</div>
							<div class="col-xs-6">
								<label>Account Privacy:</label>
								<form:radiobuttons path="user.userPrivacy" class="radio"/>
							</div>
						</div>
						<form:hidden class="form-control" path="user.username" />
					</div>
					
					<div id="profile" class="box">
						<label>About you:</label>
						<form:textarea path="user.info" class="form-control" cssErrorClass="form-control inputError" placeholder="Information" />
						<form:errors path="user.info" cssClass="errorMessage" />
						<div class="row">
							<div class="col-xs-6">
								<label>City:</label>
								<form:input path="user.city" type="text" class="form-control" cssErrorClass="form-control inputError" placeholder="City" />
								<form:errors path="user.city" cssClass="errorMessage" />
							</div>
							<div class="col-xs-6">
								<label>Country:</label>
								<form:input type="text" class="form-control" cssErrorClass="form-control inputError" placeholder="Country" path="user.country" />
								<form:errors path="user.country" cssClass="errorMessage" />
							</div>
						</div>
						<label>Address:</label>
						<form:textarea path="user.address" placeholder="Address" class="form-control" cssErrorClass="form-control inputError" />
						<div class="row">
							<div class="col-xs-6">
								<label>Cell Phone:</label>
								<form:input type="text" class="form-control" cssErrorClass="form-control inputError" placeholder="Cell Phone" path="user.mobile" />
								<form:errors path="user.mobile" cssClass="errorMessage" />
							</div>
							<div class="col-xs-6">
								<label>Other Phone:</label>
								<form:input type="text" class="form-control" cssErrorClass="form-control inputError" placeholder="Phone" path="user.phone" />
								<form:errors path="user.phone" cssClass="errorMessage" />
							</div>
						</div>
					</div>
				</div>
				<div id="rightColumn" class="col-xs-3">
					<div class="inner">
						<div id="tags" class="box">
							<label>Interests</label>
						 	<input type="text" name="tags" placeholder="Tags" class="tagsManager tm-input-success tm-input-small" />
							<div class="tagList"></div> 
							<form:input hidden="true" id="selectedTags" path="selectedTags" />
						</div>
						<div class="col-xs-12">
							<button type="submit" class="btn btn-primary">
								<b>Update Profile</b>
							</button>
						</div>
						<div class="col-xs-12">
							<button type="button" class="btn btn-primary">
								<b>Cancel</b>
							</button>
						</div>
					</div>
				</div>
				</div>
			</form:form>
			</div>
		</div>
	</div>
	
	<%@ include file="/WEB-INF/views/jsp/include/footer.jsp"%>
</body>
</html>